<template>
  <div class="AuxiliaryMonitoring">
    <div class="blueTitleStyle title" >辅助设备</div>
    <div
      class="AuxiliaryMonitoring-con"
      v-loading="fzjkLoading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div v-for="(item, index) in getterFzjkSbzt" :key="index">
        <div>
          <div class></div>
        </div>
        <div>
          <div>{{item.NAME}}</div>
          <div class="pointer" style="padding-left:0.48rem;" @click.stop="Auxiliaryevent(item)">
            设备数量
            <span style="color:#3a9fc5">{{item.SUM}}</span>
          </div>
          <div class="pointer" style="padding-left:0.48rem;" @click.stop="toGj(item)">
            {{item.YCMC}}
            <span style="color:rgb(235, 111, 73);">{{item.YCSB}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { HomepageModule } from "@/store/modules/Homepage";
import { GetSocketModule } from "@/store/modules/GetSocketData";
interface auxiliaryType {
  NAME: string;
  SUM: number;
  SYS: string;
  YCMC: string;
  id: string;
  YCSB: number;
}

@Component
export default class AuxiliaryMonitoring extends Vue {
  fzjkLoading: boolean = false;
  public AuxiliaryData: auxiliaryType[] = [
    {
      NAME: "消防系统",
      SUM: 0,
      YCSB: 0,
      SYS: "",
      id: "xfxt",
      YCMC: "告警信息",
    },
    {
      NAME: "安防系统",
      SUM: 0,
      YCSB: 0,
      SYS: "",
      id: "afxt",
      YCMC: "告警信息",
    },
    {
      NAME: "环境监控",
      SUM: 0,
      YCSB: 0,
      SYS: "",
      id: "hjjc",
      YCMC: "告警信息",
    },

    {
      NAME: "在线监测",
      SUM: 0,
      YCSB: 0,
      SYS: "",
      id: "zxjc",
      YCMC: "告警信息",
    },
    {
      NAME: "远程控制",
      // NAME: "智能控制",
      SUM: 0,
      YCSB: 0,
      SYS: "",
      id: "znkz",
      YCMC: "设备变位",
    },
  ];

  get AllAuxiliary() {
    let AllAuxiliary = GetSocketModule.getterAllAuxiliaryPointer || [];
    let sbObj = {};
    AllAuxiliary.forEach((v) => {
      let sbid = v.deviceId;
      if (v.xtValue === "03") {
        sbid = v.equipId;
      }
      sbObj[sbid] = sbObj[sbid] || {
        stationId: v.stationId,
        xtValue: v.xtValue,
        sbId: sbid,
        isRemote: false, //是否是远程控制
        isGj: false, //是否告警
        isErr: false, //是否异常
        children: [],
      };
      if (v.remoteType === "3") {
        sbObj[sbid].isRemote = true;
      }
      if (v.isGj === "gj") {
        sbObj[sbid].isGj = true;
      }
      if (v.isErr === "err") {
        sbObj[sbid].isErr = true;
      }
      sbObj[sbid].children.push(v);
    });
    return sbObj;
  }
  get AllAuxiliaryByBdz() {
    let sbObjByBdz = { all: {} };
    let AllAuxiliary = this.AllAuxiliary;
    let all = {
      remote: {
        sbs: 0,
        gjs: 0,
        ycs: 0,
        children: [],
      },
    };
    for (let sbid in AllAuxiliary) {
      let obj = AllAuxiliary[sbid];
      let stationObj = (sbObjByBdz[obj.stationId] = sbObjByBdz[
        obj.stationId
      ] || {
        remote: {
          sbs: 0,
          gjs: 0,
          ycs: 0,
          children: [],
        },
      });
      let xtObj = (stationObj[obj.xtValue] = stationObj[obj.xtValue] || {
        sbs: 0,
        gjs: 0,
        ycs: 0,
        xtValue: obj.xtValue,
        children: [],
      });
      let allXtObj = (all[obj.xtValue] = all[obj.xtValue] || {
        sbs: 0,
        gjs: 0,
        ycs: 0,
        xtValue: obj.xtValue,
        children: [],
      });
      if (obj.isRemote) {
        stationObj.remote.sbs++;
        all.remote.sbs++;
        if (obj.isGj) {
          stationObj.remote.gjs++;
          all.remote.gjs++;
        }
        if (obj.isErr) {
          stationObj.remote.ycs++;
          all.remote.ycs++;
        }
        stationObj.remote.children.push(obj);
        all.remote.children.push(obj);
      }
      xtObj.sbs++;
      allXtObj.sbs++;
      if (obj.isGj) {
        xtObj.gjs++;
        allXtObj.gjs++;
      }
      if (obj.isErr) {
        xtObj.ycs++;
        allXtObj.ycs++;
      }
      xtObj.children.push(obj);
      allXtObj.children.push(obj);
    }
    sbObjByBdz.all = all;
    return sbObjByBdz;
  }
  get getterFzjkSbzt() {
    let mapByStation = HomepageModule.mapByStation;
    let stationId = mapByStation.stationId;
    let AllAuxiliaryByBdz = this.AllAuxiliaryByBdz;
    let getterFzjkSbzt = {};
    if (stationId) {
      getterFzjkSbzt = AllAuxiliaryByBdz[stationId];
    } else {
      getterFzjkSbzt = AllAuxiliaryByBdz["all"];
    }
    let countMap: any = this.countMap || {};

    let AuxiliaryData:any = this.AuxiliaryData;
    let sbsl = {
      // xfxt: (getterFzjkSbzt["01"] && getterFzjkSbzt["01"].sbs) || 0,
      // afxt: (getterFzjkSbzt["02"] && getterFzjkSbzt["02"].sbs) || 0,
      // hjjc: (getterFzjkSbzt["04"] && getterFzjkSbzt["04"].sbs) || 0,
      // zxjc: (getterFzjkSbzt["03"] && getterFzjkSbzt["03"].sbs) || 0,
      // znkz: (getterFzjkSbzt["remote"] && getterFzjkSbzt["remote"].sbs) || 0,
      xfxt:  0,
      afxt:  0,
      hjjc:  0,
      zxjc:  0,
      znkz: (getterFzjkSbzt["remote"] && getterFzjkSbzt["remote"].sbs) || 0,
    };
    // console.log(this.FzsbData);
    
    this.FzsbData.map(it=>{
         if (it.SYSNAME=='消防系统') {
              sbsl.xfxt=it.COUNT
            }
             if (it.SYSNAME=="安防系统") {
              sbsl.afxt=it.COUNT
            }
             if (it.SYSNAME=="环境监控") {
              sbsl.hjjc=it.COUNT
            }
             if (it.SYSNAME=="在线监测") {
              sbsl.zxjc=it.COUNT
            }
            
    })
    let err = {
      xfxt: countMap.xfxt || 0,
      afxt: countMap.afxt || 0,
      hjjc: countMap.hjjc || 0,
      zxjc: countMap.zxjc || 0,
      znkz: countMap.znkz || 0,
    };
    // let err = {
    //   xfxt: (getterFzjkSbzt["01"] && getterFzjkSbzt["01"].ycs) || 0,
    //   afxt: (getterFzjkSbzt["02"] && getterFzjkSbzt["02"].ycs) || 0,
    //   hjjc: (getterFzjkSbzt["04"] && getterFzjkSbzt["04"].ycs) || 0,
    //   zxjc: (getterFzjkSbzt["03"] && getterFzjkSbzt["03"].ycs) || 0,
    //   znkz: (getterFzjkSbzt["remote"] && getterFzjkSbzt["remote"].ycs) || 0,
    // };
    this.AuxiliaryData.forEach((item) => {
      item.SUM = sbsl[item.id];
      item.YCSB = err[item.id];
    });
    AuxiliaryData[4].YCSB=this.yckzSbs;
    return AuxiliaryData;
  }
  get currentMap() {
    let mapByStation = HomepageModule.mapByStation;
    return mapByStation;
  }
  @Watch("currentMap")
  fetch() {
    this.fetchCount();
  }
  FzsbData=[]
  yckzSbs=''
  initSbbw (){
    (this as any).$services
          .queryKzCount({  })
          .then((result: any) => {
            this.yckzSbs=result.data
            
          })
          .catch((err: object) => {
            console.log(err);
          });
    
  }
  initFzsb(){
       (this as any).$services
      .getFkCount()
      .then((result: any) => {
        if (result.data) {
          this.FzsbData=result.data
          // console.log(this.FzsbData,456);
          
        }

      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    // this.fetchQueryAuxSysDevice();
    this.initSbbw()
    this.initFzsb()
    this.fetchCount();
  }
  countMap = {};
  fetchCount() {
    let mapByStation = HomepageModule.mapByStation;
    let params = {
      station: mapByStation.stationId,
      clzt: 0,
    };
    (this as any).$services
      .getCount({ data: params })
      .then((result: any) => {
        result = result || {};
        let { countNum, countMap } = result.data || {};
        this.countMap = countMap;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  Auxiliaryevent(item) {
    let pathObj = {
      xfxt: {
        path: "/homepage/fzsb",
        query: { ssxt: item.id },
      },
      afxt: {
        path: "/homepage/fzsb",
        query: { ssxt: item.id },
      },
      hjjc: {
        path: "/homepage/fzsb",
        query: { ssxt: item.id },
      },
       zxjc: {
        path: "/homepage/fzsb",
        query:{ ssxt: item.id },
      },
      znkz: {
        path: "/intelligentControlDetil",
      }
     
    };
    let route = pathObj[item.id];
    this.$router.push(route);
  }
  toGj(item) {
    if (item.id == 'znkz') {
       this.$router.push({
        path: "/homepage/yckz",
        query: { },
      });
    }
    let type = "";
    let obj = {
      xfxt: "xfxt",
      afxt: "afxt",
      hjjc: "hjjc",
      zxjc: "zxjc",

    };
    type = obj[item.id];
    if (type) {
      this.$router.push({
        path: "/operationmonitor",
        query: { source: type, clzt: "0" },
      });
    }
  }
  // fetchQueryAuxSysDevice() {
  //   this.fzjkLoading = true;
  //   (this as any).$services
  //     .queryAuxSysDevice()
  //     .then(
  //       (result: { code: number; message: string; data: auxiliaryType[] }) => {
  //         if (result.code === 200) {
  //           let obj: { [key: string]: auxiliaryType } = {};
  //           result.data.forEach((v) => {
  //             obj[v.SYS] = v;
  //           });
  //           let AuxiliaryData = [];
  //           AuxiliaryData[0] = obj.xfxt;
  //           AuxiliaryData[1] = obj.afxt;
  //           AuxiliaryData[2] = obj.hjjc;
  //           AuxiliaryData[3] = obj.znsk;
  //           AuxiliaryData[4] = obj.zxjc;
  //           this.AuxiliaryData = AuxiliaryData;
  //         }
  //         this.fzjkLoading = false;
  //       }
  //     )
  //     .catch((err: object) => {
  //       this.fzjkLoading = false;
  //     });
  // }
 
}
</script>

<style lang="scss" scoped>
.AuxiliaryMonitoring {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    > div {
      display: flex;
      > div {
        &:nth-child(1) {
          width: 1.23rem;
          height: 0.81rem;
          background-image: url("../../../../assets/img/HomePage/icon_xf.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          display: flex;
          justify-content: center;
          align-items: center;
          > div {
            width: 0.52rem;
            height: 0.6rem;
            background-image: url("../../../../assets/img/HomePage/icon/xf.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        &:nth-child(2) {
          padding: 0 0.1rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          // cursor: pointer;
          > div {
            &:nth-child(1) {
              width: 1.88rem;
              line-height: 0.24rem;
              text-align: center;
              background-image: url("../../../../assets/img/HomePage/bor_fz.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center;
              font-size: 0.16rem;
              color: #c9e3fd;
            }
            &:nth-child(2) {
              > div {
                font-size: 14px;
                font-weight: 400;
                text-align: left;
              }
            }
          }
          span {
            font-family: "numfont";
            font-size: 0.2rem;
          }
        }
      }
      &:nth-child(1) > div:nth-child(1) > div {
        animation: myfirst;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-delay: 5s;
      }
      &:nth-child(2) > div:nth-child(1) > div {
        animation: myfirst;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-delay: 6s;
        width: 0.39rem;
        height: 0.47rem;
        background-image: url("../../../../assets/img/HomePage/icon/af.png");
      }
      &:nth-child(3) > div:nth-child(1) > div {
        animation: myfirst;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-delay: 5s;
        width: 0.52rem;
        height: 0.39rem;
        background-image: url("../../../../assets/img/HomePage/icon/hj.png");
      }
      &:nth-child(4) > div:nth-child(1) > div {
        animation: myfirst;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-delay: 4s;
        width: 0.41rem;
        height: 0.52rem;
        background-image: url("../../../../assets/img/HomePage/icon/zx.png");
      }
      &:nth-child(5) > div:nth-child(1) > div {
        animation: myfirst;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        animation-delay: 5s;
        width: 0.46rem;
        height: 0.43rem;
        background-image: url("../../../../assets/img/HomePage/icon/zn.png");
      }
    }
  }
  .pointer {
    cursor: pointer;
  }
}
@keyframes myfirst {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, -5px);
  }
  50% {
    transform: translate(0, -10px);
  }
  75% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>

